<template>
<el-container class="home-container">
    <!-- 左侧区域（导航） -->
    <el-aside class="aside" width=88px>
        <el-menu class="home-menu" collapse @select="handleSelect">
            <div class="logo"></div>
            <!-- 菜单（订单） -->
            <el-submenu index="1">
                <template slot="title">
                    <i class="iconfont icon-xiadan"></i>
                </template>
                <el-menu-item index='订单录入' route='soe'>订单</el-menu-item>
                <el-menu-item index="订单查询" route='sos' class="home-menu-btn">查询</el-menu-item>
                <el-menu-item index="1-2">维修单
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
            </el-submenu>
            <!-- 菜单（工单） -->
            <el-submenu index="2">
                <template slot="title">
                    <i class="iconfont icon-gongdan"></i>
                </template>
                <el-menu-item index="2-1">操作
                </el-menu-item>
                <el-menu-item index="2-2">查询
                </el-menu-item>
            </el-submenu>
            <!-- 菜单（资金） -->
            <el-submenu index="3">
                <template slot="title">
                    <i class="iconfont icon-zijin"></i>
                </template>
                <el-menu-item index="3-1">收款
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
                <el-menu-item index="3-2">支出
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
                <el-menu-item index="3-3">票据
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
            </el-submenu>
            <!-- 菜单（日志） -->
            <el-submenu index="4">
                <template slot="title">
                    <i class="iconfont icon-rizhi"></i>
                </template>
                <el-menu-item index="4-1">操作</el-menu-item>
                <el-menu-item index="4-2">查询</el-menu-item>
            </el-submenu>
            <!-- 菜单（报表） -->
            <el-submenu index="5">
                <template slot="title">
                    <i class="iconfont icon-baobiao"></i>
                </template>
                <el-menu-item index="5-1">订 单
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
                <el-menu-item index="5-2">维修单
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
            </el-submenu>
            <!-- 菜单（设置） -->
            <el-submenu index="6">
                <template slot="title">
                    <i class="iconfont icon-shezhi"></i>
                </template>
                <el-menu-item index="6-1">一般订单
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
                <el-menu-item index="6-2">项目订单
                    <el-button class="home-menu-btn" size="mini" type="primary" round>查询</el-button>
                </el-menu-item>
                <el-menu-item index="6-3">维修单</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
    <!-- 右侧区域 -->
    <el-container>
        <!-- 主体区域 -->
        <el-main class="main">
            <!-- 用户横条 -->
            <div class="user-box"></div>
            <el-tabs v-model="activeTabsPaneName" @tab-remove="removeTab">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name" :closable='item.closable'>
                    <!-- 路由占位符号 -->
                    <router-view :name="item.content"></router-view>
                </el-tab-pane>

            </el-tabs>
        </el-main>
        <!-- 底部区域 -->
        <el-footer height=36px class="footer">德智文体生产管理系统</el-footer>
    </el-container>
</el-container>
</template>

<style lang="less" scoped>
.home-container {
    height: 100%;
}

.home-menu {
    height: 100%;
    width: 80px;
}

.el-menu-item {
    height: 40px;
    line-height: 40px;
    margin: 10px 0px;
}

.el-menu-item {
    vertical-align: none;
}

.home-menu-btn {
    position: absolute;
    right: 15px;
    top: 11px;
    height: 26px;
    line-height: 26px;
    background-color: #409EFF;
    border-radius: 30px;
    color: white;
}

.home-menu-btn:hover {
    background-color: #66b1ff;
    color: white;
}

.home-menu-btn.el-menu-item.is-active {
    background-color: #3a8ee6;
    color: white;
}

.home-menu-btn is-active {
    background-color: #3a8ee6;
    color: white;
}

.iconfont {
    font-size: 80px;
    color: #409EFF;
    display: flex;
    justify-content: center;
    position: relative;
    left: -9px;
}

.iconfont::before {
    width: 80px;
}

.logo {
    height: 80px;
    width: 80px;
    background-image: url("../assets/logo.png");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center center;
}

.user-box {
    height: 28px;
}

.main {
    position: fixed;
    top: 0px;
    bottom: 36px;
    left: 81px;
    right: 0px;
    padding: 0px;
}

.footer {
    position: fixed;
    bottom: 0px;
    left: 81px;
    right: 0px;
    box-shadow: 0px -3px 5px 0px #0000005e;
    background-color: #e4e4e4;
    line-height: 36px;
    text-align: center;
}
</style>

<script>
export default {
    data() {
        return {
            editableTabs: [{
                title: '首页',
                name: 'first',
                closable: false,
                content: 'sos'
            }],
            activeTabsPaneName: 'first'
        }
    },
    methods: {
        removeTab(targetName) {
            const tabs = this.editableTabs
            let activeName = this.activeTabsPaneName
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            activeName = nextTab.name
                        }
                    }
                })
            }
            this.activeTabsPaneName = activeName
            this.editableTabs = tabs.filter(tab => tab.name !== targetName)
        },
        handleSelect(index, indexPath, e) {
            for (const x in this.editableTabs) {
                if (this.editableTabs[x].name === index) {
                    this.activeTabsPaneName = index
                    return false
                }
            }
            this.editableTabs.push({
                title: index,
                name: index,
                closable: true,
                content: e.route
            })
            this.activeTabsPaneName = index
        }
    }
}
</script>
